<template>
    <van-popup
            class="common-select_date_time-wrap"
            safe-area-inset-bottom
            v-model="visible"
            round
            position="bottom"
            :style="{ height: '50%' }"
            @closed="handleCancel"
    >
        <van-datetime-picker
                :value="value"
                :type="type"
                :title="title"
                :min-date="minDate"
                :max-date="maxDate"
                @confirm="handleConfirm"
                @cancel="handleCancel"
        />
    </van-popup>
</template>

<script>
    import {Popup, DatetimePicker} from 'vant';

    export default {
        name: 'SelectDateTime',

        components: {
            [Popup.name]: Popup,
            [DatetimePicker.name]: DatetimePicker
        },

        props: {
            title: {
                type: String,
                default: '请选择'
            },

            type: {
                type: String,
                default: 'datetime'
            },

            minDate: Date,

            maxDate: Date
        },

        data (){
            return {
                visible: false,
                value: undefined
            }
        },

        methods: {
            open (callback, defValue){
                this.visible = true;

                this.value = new Date(defValue);

                this.$once('date.confirm', callback);
            },

            handleConfirm (value){
                this.$emit('date.confirm', value);

                this.visible = false;
            },

            handleCancel (){
                this.visible = false;

                this.$off('date.confirm');
            }
        }
    }
</script>

<style lang="scss">
    .common-select_date_time-wrap {
    }
</style>